<!DOCTYPE html>
<html>

<head>
    <title>商品管理</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <link href="../lib/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="../lib/weui-master/dist/style/weui.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../lib/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../sys/css/articlelist.css">
    <link rel="stylesheet" type="text/css" href="../sys/css/footseller.css">
    <style lang="css">
    body {
        background-color: #F4F5F7;
    }
    
    .top {
        height: 50px;
        line-height: 50px;
        background-color: #325AA8;
        color: white;
        display: flex;
        justify-content: space-between;
    }
    
    .top .fa {
        font-size: 1.2rem;
        padding: 0 10px;
    }
    
    .top input {
        width: 67%;
        margin-top: 9px;
    }
    
    .topmenu ul {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: row;
    }
    
    .topmenu li {
        background-color: #FAF9FA;
        color: #333;
        flex: 1 1 auto;
        height: 45px;
        line-height: 45px;
        text-align: center;
        border-left: 1px solid #d1d1d1;
        list-style: none;
        box-sizing: border-box;
    }
    
    .topmenu li:nth-child(1) {
        border-left: none;
    }
    
    .topmenu .active {
        color: #FF4400;
    }
    
    table {
        /*table-layout: fixed;*/
        width: 100%;
    }
    
    table tr {
        width: 100%;
        border-bottom: 1px solid #d1d1d1;
        background-color: #fff;
    }
    
    td {
        word-break: break-all;
        word-wrap: break-word;
    }
    
    .imgbox {
        height: 130px;
        width: 100%;
        line-height: 130px;
    }
    
    .imgbox img {
        width: 90%;
        max-width: 9rem;
        padding-left: 8%;
        height: 110px;
    }
    .goodsbox{
        overflow: auto;
    }
    
    .goodsbox .name,
    .goodsbox .price,
    .goodsbox .num {
        padding: 5px;
    }
    
    .goodsbox .num span {
        display: inline-block;
        width: 40%;
    }
    
    .goodsbox .num span:nth-child(2) {
        display: inline-block;
        width: 55%;
    }
    
    .goodsbox .num {
        display: flex;
        justify-content: space-between;
    }
    
    .addgoods {
        width: 100%;
        height: 60px;
        position: fixed;
        bottom: 0;
        line-height: 60px;
        text-align: center;
        background-color: #F9F9F9;
        border-top: 1px solid #d1d1d1;
    }
    
    .addgoods .mybtn {
        width: 60%;
        height: 40px;
        line-height: 40px;
        color: white;
        background-color: #325AA8;
        border: none;
        border-radius: 5px;
        font-size: 1.2rem;
        text-align: center;
        display: inline-block;
        margin-top: 10px;
    }
    
    .line-wrapper {
        width: 100%;
        height: 110px;
        overflow: hidden;
        border-bottom: 1px solid #aaa;
    }
    
    .line-scroll-wrapper {
        height: 110px;
        clear: both;
    }
    
    .line-btn-delete {
        float: left;
        width: 70px;
        height: 110px;
    }
    
    .line-btn-delete button {
        width: 100%;
        height: 100%;
        background: red;
        border: none;
        font-size: 24px;
        font-family: 'Microsoft Yahei';
        color: #fff;
    }
    
    .line-normal-wrapper {
        display: inline-block;
        float: left;
        padding-bottom: 10px;
    }
    
    .line-normal-icon-wrapper {
        float: right;
        width: 120px;
        height: 120px;
        margin-right: 12px;
    }
    
    .line-normal-icon-wrapper img {
        width: 120px;
        height: 120px;
    }
    
    .line-normal-avatar-wrapper {
        width: 100px;
        height: 110px;
        float: left;
        margin-left: 6px;
        line-height: 110px;
    }
    
    .line-normal-avatar-wrapper img {
        width: 100px;
        height: 100px;
    }
    
    .line-normal-left-wrapper {
        float: left;
        overflow: hidden;
    }
    
    .line-normal-info-wrapper {
        float: left;
        margin-left: 10px;
    }
    
    .line-normal-name {
        color: #4e4e4e;
        margin-top: 7px;
        font-size: 16px;
        word-wrap: break-word;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .line-normal-price {
        font-size: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #FF4400;
        margin-top: 11px;
    }
    
    .line-normal-num {
        height: 28px;
        line-height: 28px;
        color: #999;
        margin-top: 11px;
    }
    
    .line-normal-num span:nth-child(1) {
        display: inline-block;
        width: 40%;
    }
    
    .line-normal-num span:nth-child(2) {
        display: inline-block;
        width: 55%;
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="top">
            <span @click="backHome"><i class="fa fa-chevron-left "></i> </span>
            <input type="text" placeholder="搜索商品名称">
            <span><i class="fa fa-search "></i>
        </div>
        <div class="topmenu ">
            <ul>
                <li class="active" @click="changeActiveType(1)">出售中</li>
                <li @click="changeActiveType(2)">售罄的</li>
                <li @click="changeActiveType(3)">仓库中</li>
                <li @click="changeActiveType(4)">最新商品</li>
            </ul>
        </div>
        <div class="goodsbox">
            <!-- <table>
                <tr style="margin-left: -100px;" >
                    <td style="width:40%;">
                        <div class="imgbox">
                            <img src="../img/renqi1.png" />
                        </div>
                    </td>
                    <td style="width:50%;">
                        <div class="name">
                            <p>玫瑰花茶</p>
                        </div>
                        <div class="price">
                            <p>￥50.00</p>
                        </div>
                        <div class="num">
                            <span>库存:2345</span>
            <span>销量:1456666</span>
        </div>
        </td>
        </tr>
        </table> -->
        <div class="line-wrapper" v-for="goods in gooslist">
            <div class="line-scroll-wrapper">
                <div class="line-normal-wrapper">
                    <div class="line-normal-left-wrapper">
                        <div class="line-normal-avatar-wrapper"><img :src="goods.img" /></div>
                        <div class="line-normal-info-wrapper">
                            <div class="line-normal-name">
                                <nobr v-text="goods.name"></nobr>
                            </div>
                            <div class="line-normal-price" v-text="goods.price"></div>
                            <div class="line-normal-num">
                                <span >库存:{{goods.num1}}</span>
                                <span>销量:{{goods.num2}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="line-btn-delete">
                    <button>删除</button>
                </div>
            </div>
        </div>
        <!--  <div class="line-wrapper">
            <div class="line-scroll-wrapper">
                <div class="line-normal-wrapper">
                    <div class="line-normal-left-wrapper">
                        <div class="line-normal-avatar-wrapper"><img src="../img/1.JPG" /></div>
                        <div class="line-normal-info-wrapper">
                            <div class="line-normal-name">
                                <nobr>玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶</nobr>
                            </div>
                            <div class="line-normal-price">￥50.00</div>
                            <div class="line-normal-num">
                                <span>库存:2345</span>
                                <span>销量:1456666</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="line-btn-delete">
                    <button>删除</button>
                </div>
            </div>
        </div> -->
    </div>
    <div class="addgoods">
        <div class="mybtn">添加商品</div>
    </div>
    </div>
    <script src="../lib/jquery/jquery-1.11.0.min.js"></script>
    <script src="../lib/vue/vue.js"></script>
    <script type="text/javascript" src="../data/shopadmin.json"></script>
    <script>
    // $(document).ready(function(e) {
    $(window).load(function() {

        //设定每一行的宽度=屏幕宽度+按钮宽度
        var windowWidth = $(window).width();
        $(".line-scroll-wrapper").width($(".line-wrapper").width() + $(".line-btn-delete").width());
        // 设定常规信息区域宽度=屏幕宽度

        $(".line-normal-left-wrapper").width($(".line-wrapper").width());

        $(".line-normal-wrapper").width($(".line-wrapper").width());

        $(".line-normal-info-wrapper").width($(".line-normal-wrapper").width() - 125);

        // 获取所有行，对每一行设置监听
        var lines = $(".line-normal-wrapper");
        var len = lines.length;
        var lastX, lastXForMobile;

        // 用于记录被按下的对象
        var pressedObj; // 当前左滑的对象
        var lastLeftObj; // 上一个左滑的对象

        // 用于记录按下的点
        var start;

        // 网页在移动端运行时的监听
        for (var i = 0; i < len; ++i) {
            lines[i].addEventListener('touchstart', function(e) {
                lastXForMobile = e.changedTouches[0].pageX;
                pressedObj = this; // 记录被按下的对象 

                // 记录开始按下时的点
                var touches = event.touches[0];
                start = {
                    x: touches.pageX, // 横坐标
                    y: touches.pageY // 纵坐标
                };
            });

            lines[i].addEventListener('touchmove', function(e) {
                // 计算划动过程中x和y的变化量
                var touches = event.touches[0];
                delta = {
                    x: touches.pageX - start.x,
                    y: touches.pageY - start.y
                };

                // 横向位移大于纵向位移，阻止纵向滚动
                if (Math.abs(delta.x) > Math.abs(delta.y)) {
                    event.preventDefault();
                }
            });

            lines[i].addEventListener('touchend', function(e) {
                if (lastLeftObj && pressedObj != lastLeftObj) { // 点击除当前左滑对象之外的任意其他位置
                    $(lastLeftObj).animate({
                        marginLeft: "0"
                    }, 500); // 右滑
                    lastLeftObj = null; // 清空上一个左滑的对象
                }
                var diffX = e.changedTouches[0].pageX - lastXForMobile;
                if (diffX < -150) {
                    $(pressedObj).animate({
                        marginLeft: "-70px"
                    }, 500); // 左滑
                    lastLeftObj && lastLeftObj != pressedObj &&
                        $(lastLeftObj).animate({
                            marginLeft: "0"
                        }, 500); // 已经左滑状态的按钮右滑
                    lastLeftObj = pressedObj; // 记录上一个左滑的对象
                } else if (diffX > 150) {
                    if (pressedObj == lastLeftObj) {
                        $(pressedObj).animate({
                            marginLeft: "0"
                        }, 500); // 右滑
                        lastLeftObj = null; // 清空上一个左滑的对象
                    }
                }
            });
        }

        // 网页在PC浏览器中运行时的监听
        for (var i = 0; i < len; ++i) {
            $(lines[i]).bind('mousedown', function(e) {
                lastX = e.clientX;
                pressedObj = this; // 记录被按下的对象
            });

            $(lines[i]).bind('mouseup', function(e) {
                if (lastLeftObj && pressedObj != lastLeftObj) { // 点击除当前左滑对象之外的任意其他位置
                    $(lastLeftObj).animate({
                        marginLeft: "0"
                    }, 500); // 右滑
                    lastLeftObj = null; // 清空上一个左滑的对象
                }
                var diffX = e.clientX - lastX;
                if (diffX < -150) {
                    $(pressedObj).animate({
                        marginLeft: "-70px"
                    }, 500); // 左滑
                    lastLeftObj && lastLeftObj != pressedObj &&
                        $(lastLeftObj).animate({
                            marginLeft: "0"
                        }, 500); // 已经左滑状态的按钮右滑
                    lastLeftObj = pressedObj; // 记录上一个左滑的对象
                } else if (diffX > 150) {
                    if (pressedObj == lastLeftObj) {
                        $(pressedObj).animate({
                            marginLeft: "0"
                        }, 500); // 右滑
                        lastLeftObj = null; // 清空上一个左滑的对象
                    }
                }
            });
        }
    });
    $(function() {
        var windowHeight = $(window).height();
        $(".goodsbox").height(windowHeight-160);
        var box = new Vue({
            el: '.box',
            data: goodsmanage,
            methods: {
                changeActiveType: function(i) {
                    $(".topmenu ul li").removeClass('active');
                    $(".topmenu ul li:nth-child(" + i + ")").addClass('active');
                },
                backHome: function() {
                    window.location.href = "index.html";
                }
            }
        })
    })
    </script>
</body>

</html>
